<template>
  <FullCalendar
    class="fullCalendar"
    :options="calendarOptions"
    ref="fullCalendar"
  />
</template>
<script>
import FullCalendar from "@fullcalendar/vue"; // 核心库
import InteractionPlugin from "@fullcalendar/interaction"; // 交互库
import MomentPlugin from "@fullcalendar/moment"; // 格式化时间库。可以在插件使用YYYY MM
import DaygridPlugin from "@fullcalendar/daygrid"; // 月视图
export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        nowIndicator: true, // 是否显示当前时间轴
        allDaySlot: false, // 是否显示全天
        slotEventOverlap: true, // 事件是否可重叠
        editable: false, // 能否编辑事件。如果需要拖拽事件，必须开启它
        droppable: true, // 是否把其它日历上的事件拖拽到这个日历上
        selectOverlap: false, // 用户选择时能否重叠到事件上, selectable必须为true才生效
        unselectAuto: true, // 选中时，点击页面其它位置是否取消选中
        selectable: true, // 允许用户点击或拖拽选中
        dayHeaders: true, // 是否显示日期标题
        dayMinWidth: "auto", // 日最小宽度，如果日期单元格没办法满足，会出现水平滚动条
        refetchResourcesOnNavigate: true, // 当用户切换不同视图时，是否重新加载数据
        resourceOrder: "index", // 资源按照index属性排序
        locale:  "zh-cn", // 中英文
        initialView: "dayGridMonth", // 默认视图
        schedulerLicenseKey: "", // key,需要花钱
        height: 400, // 日历整体高度
        eventSources: [], // 事件列表
        resources: [], // 资源列表
        plugins: [
          // 用到的插件
        //   MomentPlugin,
          DaygridPlugin,
        //   timeGridPlugin,
        //   resourceTimelinePlugin,
          InteractionPlugin,
        //   resourceTimeGridPlugin,
        //   scrollgridPlugin,
        ],
        headerToolbar: {
          // 标题显示的按钮和文本。
          left: "prev,title,mothTitle,next,today",
          center: "",
          right: "timeGridDay,timeGridWeek,dayGridMonth,timeline",
        },
        buttonText: {
          // 按钮的文本设置
          today: "今日",
          dayGridMonth: "月",
          week: "周",
          day: "日",
        },
        customButtons: {
          // 自定义button，如果想显示页面上，把timeline放到headerToolbar对象里。
          timeline: {
            text: "自定义",
            click: this.timelineEvent,
          },
        },
        slotLabelFormat: "HH:mm", // 资源视图的事件格式
        eventTimeFormat: "HH:mm", // 事件事件格式
        dayMaxEvents: true, // 在dayGrid视图中如果每个单元格事件超出单元格会出现'+more'
        resourceAreaWidth: "280px", // 横轴资源视图的左侧列表宽度
        // 每个视图不同显示的日期格式
        views: {
          timeGridDay: {
            titleFormat: { year: "numeric", month: "short", day: "numeric" },
          },
          timeGridWeek: {
            titleFormat: { year: "numeric", month: "short" },
          },
          dayGridMonth: {
            titleFormat: { year: "numeric", month: "short" },
            displayEventTime: true,
          },
          timeline: {
            titleFormat: { year: "numeric", month: "short", day: "numeric" },
          },
          resourceTimeGrid: {
            titleFormat: { year: "numeric", month: "short", day: "numeric" },
            duration: { days: 1 },
          },
        },
        eventShortHeight: 15, // 具有最小事件的样式
        slotDuration: "00:15", // 事件轴以15分钟为一刻度
        eventMinHeight: "15", // 事件最小高度
        // 出现+more会调用该回调。返回值为：文字或者DOM
        moreLinkContent: (info) =>
          this.$t("schedule.more") + info.num + this.$t("schedule.item"),
        // 点击+more触发该回调
        moreLinkClick: this.eventLimitClickFun,
        // title标题文本回调。返回值为：文本和DOM
        dayHeaderContent: this.columnHeaderHtmlFun,
        // 取消选择回调
        unselect: this.unselectCallback,
        // 日期切换回调。注意：切换视图也会调用该回调。
        datesSet: this.handleDatesRender,
        // 点击事件
        eventClick: this.handleEventClick,
        // 切换视图
        viewDidMount: this.handleViewSkeletonRender,
        // 月视图每个单元格回调。返回值：文字或DOM
        dayCellContent: (info) => {
          return {
            html: `<a class="fc-daygrid-day-number">${info.dayNumberText.replace(
              "日",
              ""
            )}</a>`,
          };
        },
        // 现在指示器(nowIndicator)回调
        nowIndicatorDidMount: this.nowIndicatorDidMount,
        // 到当前时间指示器时间显示。如果有返回值（文本或DOM）：则显示返回值
        nowIndicatorContent: this.setNowIndicatorTime,
        // 日历尺寸发生改变
        windowResize: (arg) => {
          this.fullcalendarResize(arg.view.type);
        },
      },
    };
  },
  methods: {
    eventLimitClickFun(dataInfo){
        console.log("就是我哦哦我我11",dataInfo)
    },
    columnHeaderHtmlFun(dataInfo){
        console.log("111111111",dataInfo)
    },
    unselectCallback(data){
        console.log("2222222",data)
    },
    handleDatesRender(data){
        console.log("333333",data)
    },
    handleEventClick(data){
        console.log("444444",data)
    },
    handleViewSkeletonRender(data){
        console.log("6666",data)
    }   
    
  },
};
</script>
